<template>
  <div class="echartsDiv">
    <div class="titleDiv clearFloat">
      <div class="lf lineDiv"></div>
      <p class="lf titleP">视频播放</p>
      <div class="rf">
        <p class="lf labelP">选择时间：</p>
        <div class="lf">
          <a-range-picker
            :defaultValue="[$util.moment(searchParams.bgTm),$util.moment(searchParams.endTm)]"
            :format="$defaultSettings.dateFormat"
            @change="onChange"/>
        </div>
        <a-button type="primary" class="lf" @click="getList" :loading="loading">
          查询
        </a-button>
      </div>
    </div>
    <div class="showCharts1 lf" ref="videoPlaybackVolumeCharts"></div>
    <div class="showCharts2 rf" ref="viewRankCharts1"></div>
    <div class="showCharts2 rf" ref="viewRankCharts2"></div>
  </div>
</template>

<script>
/* eslint-disable */
import moment from 'moment'
import {queryVideoViewCount,queryVideoViewRate} from '@/api/system/user'
  export default {
    name: 'videoPlaybackVolume',
    data(){
      return{
        /*   -------搜索框--------*/
        searchParams: {
          bgTm: moment(new Date()).subtract(6, 'days').format('YYYY-MM-DD'),
          endTm: this.$defaultSettings.endTm,
        },
       loading: false
      }
    },
    mounted() {
      this.getList()
    },
    methods:{
      getList() {
        this.loading = true
        queryVideoViewCount(this.searchParams).then(res=> {
          this.loading = false
          var datax = []
          var datay = []
          if(res.code==200) {
            res.data.forEach(e=> {
              datax.push(e.name)
              datay.push(e.value)
            })
            this.initEchart(datax,datay)
          }
        })
        this.loading = true
        queryVideoViewRate(this.searchParams).then(res=> {
          this.loading = false
          var data1 = [
            {value:0, name:'重点排污企业'},
            {value:0, name:'其他企业'},
            {value:0, name:'个人用户'},
            {value:0, name:'系统员工'},
          ]
          var data2 = [
            {value:0, name:'重点排污企业'},
            {value:0, name:'其他企业'},
            {value:0, name:'个人用户'},
            {value:0, name:'系统员工'},
          ]
          if(res.code==200) {
              if(res.data.up.length!=0) {
                data1 = res.data.up
              }
            if(res.data.down.length!=0) {
              data2 = res.data.down
            }
            this.initEchart1(data1)
            this.initEchart2(data2)
          }
        })
      },
      initEchart(datax,datay){
        let myChart = this.$echarts.init(this.$refs.videoPlaybackVolumeCharts);
        let option = {
          backgroundColor: '#fff',
          title: {
            show: false,
            text: '多线图',
            textStyle: {
              align: 'center',
              color: '#333',
              fontSize: 20,
            },
            top: '5%',
            left: 'center',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          grid: {
            top: '14%',
            left: '3%',
            right: '8%',
            bottom: '8%',
            containLabel: true
          },
          xAxis: [{
            name:"系列课程",
            type: 'category',
            axisLine: {
              show: true
            },
            splitArea: {
              // show: true,
              color: '#333',
              lineStyle: {
                color: '#333'
              },
            },
            axisLabel: {
              color: '#666',
              fontSize: '16',
            },
            splitLine: {
              show: false
            },
            boundaryGap: true,
            data: datax,

          }],

          yAxis: [{
            name:"观看量",
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#EEEEEE']
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                color: '#666',
                fontSize: '16',
              }
            },
            axisTick: {
              show: false,
            },
          }],
          series: [{
            name: '注册总量',
            type: 'line',
            smooth: true, //是否平滑

            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: "#5DA4E6",
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 0
              },
            },
            itemStyle: {
              color: "#4496E2",
              borderColor: "#4496E2",
              borderWidth: 2,
              shadowBlur: 0
            },
            tooltip: {
              show: false
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(68,150,226, 0.2)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(68,150,226, 0.2)'
                  }
                ],
                global: false // 缺省为 false
              }
            },
            data: datay,
          }
          ]
        };
        myChart.setOption(option);

        // 监听窗口变化 - 只刷新最后一个图表
        window.onresize = () => {
          myChart.resize();
        }
        // 监听窗口变化 - 多个图表同时刷新
        window.addEventListener('resize', () => {
          myChart.resize();
        })
      },
      initEchart1(data1){
        let myChart1 = this.$echarts.init(this.$refs.viewRankCharts1);
        let option1 = {
          color: ['#1CCFCF','#6ABB3E','#FFCC00','#FF8400','#FF6468','#5569FF','#4496E2'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            show : true,
          },
          title:{
            text:"占全部视频播放比例",
            x:280,
            y:15,
            textStyle: {
              fontSize: '18',
              color: "#333",
              textAlign: 'center',
            }
          },
          legend: {
            orient: 'vertical', //纵向图例
            left: '58%',
            itemWidth: 15,
            itemHeight: 15,
            top: '20%',
            itemGap: 10, //图例item间距
            textStyle: {
              color: '#000',
              fontSize: 14
            }
          },
          series : [
            {
              name:'账号类型',
              type:'pie',
              center: ['30%', '50%'],
              radius : [0, 100],
              label: {
                normal: {
                  position: 'inner',
                  color: "#ddd" ,
                  fontStyle: 'normal' ,
                  fontWeight: 'normal' ,
                  fontSize: 12,
                  lineHeight:20,
                  formatter: function(params) {
                    var str = params.name + '\n' + params.value + "%";
                    return str
                  }
                }
              },
              data:data1
            }
          ]
        };

        myChart1.setOption(option1);

        // 监听窗口变化 - 只刷新最后一个图表
        window.onresize = () => {
          myChart1.resize();
        }
        // 监听窗口变化 - 多个图表同时刷新
        window.addEventListener('resize', () => {
          myChart1.resize();
        })
      },
      initEchart2(data2){
        let myChart2 = this.$echarts.init(this.$refs.viewRankCharts2);
        let option2 = {
          color: ['#1CCFCF','#6ABB3E','#FFCC00','#FF8400','#FF6468','#5569FF','#4496E2'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            show : true,
          },
          title:{
            text:"占全部学时比例",
            x:280,
            y:15,
            textStyle: {
              fontSize: '18',
              color: "#333",
              textAlign: 'center',
            }
          },
          legend: {
            orient: 'vertical', //纵向图例
            left: '58%',
            itemWidth: 15,
            itemHeight: 15,
            top: '20%',
            itemGap: 10, //图例item间距
            textStyle: {
              color: '#000',
              fontSize: 14
            }
          },
          series : [
            {
              name:'账号类型',
              type:'pie',
              center: ['30%', '48%'],
              radius : [0, 100],
              label: {
                normal: {
                  position: 'inner',
                  color: "#ddd" ,
                  fontStyle: 'normal' ,
                  fontWeight: 'normal' ,
                  fontSize: 12,
                  lineHeight:20,
                  formatter: function(params) {
                    var str = params.name + '\n' + params.value + "%";
                    return str
                  }
                }
              },
              data:data2
            }
          ]
        };

        myChart2.setOption(option2);

        // 监听窗口变化 - 只刷新最后一个图表
        window.onresize = () => {
          myChart2.resize();
        }
        // 监听窗口变化 - 多个图表同时刷新
        window.addEventListener('resize', () => {
          myChart2.resize();
        })
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
      onChange(dates, dateStrings) {
        this.searchParams.bgTm = dateStrings[0];
        this.searchParams.endTm = dateStrings[1];
      }
    },
  }
</script>

<style lang="less" scoped>
  .lf{
    float:left;
  }
  .rf{
    float:right;
  }
  .clearFloat:after{
    content:"";
    display:block;
    clear:both;
  }
  .echartsDiv{
    width:100%;
    height:100%;
    .titleDiv{
      width:100%;
      height:60px;
      padding:0 30px;
      box-sizing: border-box;
      border-bottom:1px solid #E5E5E5;
      p{
        margin:0;
      }
      /deep/ .ant-select-selection--single{
        height:40px;
        margin:10px 40px 0 0;
      }
      /deep/ .ant-select-selection__rendered{
        line-height:40px;
      }
      .lineDiv{
        width: 4px;
        height: 24px;
        background: #4496E2;
        margin:18px 20px 0 0;
      }
      .titleP{
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height:60px;
      }
      .labelP{
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        margin-right:18px;
        line-height:60px;
      }
      /deep/ .ant-input{
        height:40px;
        margin-top:10px;
      }
      /deep/ .ant-btn{
        width: 100px;
        height: 40px;
        background: #4496E2;
        box-shadow: 1px 6px 12px 0 rgba(68, 150, 226, 0.2);
        border-radius: 4px;
        font-size: 16px;
        margin:10px 0 0 16px;
      }
    }
    .lf{
      float:left;
    }
    .rf{
      float:right;
    }
    .showCharts1{
      width:calc( 100% - 507px );
      height:calc( 100% - 60px );
      display: inline-block;
    }
    .showCharts2{
      width:507px;
      height:calc( 50% - 30px );
      display: inline-block;
    }
  }
</style>